<template>
	<div class="content-container">
		<a-form layout="inline" class="search-form">
<#list searchFields as po>
	<#if po.listQuery == 'interval' || po.listQuery == 'between'>
		<#if po.componentType == 'date'>
			<a-form-item label="${po.description}">
				<a-date-picker placeholder="选择日期" v-model="queryParam.${po.propertyName}Start" style="width:130px;" @change="handleSearch"></a-date-picker>
				<a-date-picker placeholder="选择日期" v-model="queryParam.${po.propertyName}End" style="width:130px;" @change="handleSearch"></a-date-picker>
			</a-form-item>
		<#else>
			<a-form-item label="${po.description}">
				<div style="display: flex; justify-content: space-between; justify-items: center;">
					<a-input v-model="queryParam.${po.propertyName}Start" style="width:100px;" allowClear @change="handleSearch"></a-input>
					<div style="margin: 0 5px;"> ~ </div>
					<a-input v-model="queryParam.${po.propertyName}End" style="width:100px;" allowClear @change="handleSearch"></a-input>
				</div>
			</a-form-item>
		</#if>
	<#else>
		<#if po.componentType == 'date'>
			<a-form-item label="${po.description}">
				<a-date-picker type="date" placeholder="选择日期" v-model="queryParam.${po.propertyName}" @change="handleSearch"></a-date-picker>
			</a-form-item>
		<#elseif po.componentType == 'radio' || po.componentType == 'checkbox' || po.componentType == 'select'>
			<a-form-item label="${po.description}">
				<a-select v-model="queryParam.${po.propertyName}" placeholder="全部" style="width: 100px;" allowClear @change="handleSearch">
					<a-select-option v-for="item in ${po.propertyName}List" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
				</a-select>
			</a-form-item>
		<#else>
			<a-form-item label="${po.description}">
				<a-input v-model="queryParam.${po.propertyName}" allowClear @change="handleSearch"></a-input>
			</a-form-item>
		</#if>
	</#if>
</#list>
			<a-form-item style="float: right; margin-right: 0;">
				<a-button type="primary" shape="round" @click="handleAdd()">新增</a-button>
			</a-form-item>
		</a-form>
		<div class="panel-header">
			<div class="header-height"></div>
			<div class="header-title">${description}</div>
		</div>
		<div class="panel-body">
			<s-table ref="table" :data="loadData" :columns="columns" rowKey="id">
				<template slot="operate" slot-scope="text, record">
					<a-button type="link" @click="handleEdit(record)">编辑</a-button>
					<a-button type="link" @click="handleDelete(record)">删除</a-button>
				</template>
			</s-table>
		</div>
		<${entityName?uncap_first}Vue ref="${entityName?uncap_first}Vue" @refresh="handleSearch"></${entityName?uncap_first}Vue>
	</div>
</template>
<script>
	import { get${entityName}ListByPage, del${entityName} } from '@/api/${moduleName}/${entityName?uncap_first}.js'
	import {
		STable
	} from '@/components'
	import ${entityName?uncap_first}Vue from './${entityName?uncap_first}.vue'
	export default {
		components: {
			STable,
			${entityName?uncap_first}Vue
		},
		data() {
			return {
				queryParam: {
					pageNum: 1,
					pageSize: 10,
				<#list searchFields as po>
					<#if po.listQuery == 'interval' || po.listQuery == 'between'>
					${po.propertyName}Start: undefined,
					${po.propertyName}End: undefined<#if po_has_next>,</#if>
					<#else>
					${po.propertyName}: undefined<#if po_has_next>,</#if>
					</#if>
				</#list>
				},
			<#list formFields as po>
				<#if po.componentType == 'radio' || po.componentType == 'checkbox' || po.componentType == 'select'>
				${po.propertyName}List: [
					{id:"1",name:"选项1"},
					{id:"2",name:"选项2"},
					{id:"3",name:"选项3"}
				],
				</#if>
			</#list>
				columns: [{
						title: '序号',
						align: 'center',
						width: 80,
						customRender: (text, record, index) => {
							return index + 1
						},
					},
				<#list fields as po>
					<#if po.listShow?if_exists?html == 'Y'>
					{
						align: 'center',
						title: '${po.description}',
						dataIndex: '${po.propertyName}'
					},
					</#if>
				</#list>
					{
						title: '操作',
						scopedSlots: {
							customRender: 'operate'
						},
						align: 'center',
						customCell: () => {
							return {
								style: {
									'min-width': '120px'
								},
							}
						},
					},
				],
				loadData: (parameter) => {
					this.queryParam.pageNum = parameter.pageNum
					this.queryParam.pageSize = parameter.pageSize
					return get${entityName}ListByPage(this.queryParam).then((res) => {
						if (res.code == 200) {
							return res.data
						}
					})
				},
				timer: null,
				timerStart: null
			}
		},
		methods: {
			handleSearch() {
				var current = new Date().getTime()
				clearTimeout(this.timer)
				if (this.timerStart && current - this.timerStart > 1000) {
					this.timerStart = null
					this.$refs.table.refresh()
				} else {
					this.timerStart = current
					this.timer = setTimeout(() => {
						this.timerStart = null
						this.$refs.table.refresh()
					}, 1000)
				}
			},
			handleAdd() {
				this.$refs.${entityName?uncap_first}Vue.open()
			},
			handleEdit(record) {
				this.$refs.${entityName?uncap_first}Vue.open(record.id)
			},
			handleDelete(record) {
				let that = this
				this.$confirm({
					title: '确定要删除吗?',
					content: '删除之后数据将无法恢复',
					onOk() {
						del${entityName}(record.id).then((res) => {
							if (res.code === 200) {
								that.$message.success('删除成功')
								that.$refs.table.refresh()
							} else {
								that.$message.error('删除失败')
							}
						})
					}
				})
			}
		}
	}
</script>
<style scoped lang="less">
	.content-container {
		background-color: #fff;
		border-radius: 10px;
	}

	.search-form {
		padding: 20px;
		padding-bottom: 0;
	}

	.panel-header {
		padding-top: 15px;
		position: relative;
		color: #292929;
		font-weight: bold;
		display: flex;
		align-items: center;

		.header-height {
			margin-right: 18px;
			display: inline-block;
			height: 18px;
			width: 4px;
			background-color: rgb(0, 108, 254);
			border-radius: 2px;
		}

		.header-title {
			display: inline-block;
			font-size: 16px;
			font-family: 'Microsoft YaHei'
		}
	}

	.panel-body {
		padding: 20px 20px 0px 20px;
	}

	/deep/.ant-input {
		border: 1px solid #eee !important;
	}

	/deep/.ant-select-selection {
		border: 1px solid #eee !important;
	}

	/deep/.ant-card-body {
		padding: 0 !important;
	}

	/deep/.ant-btn {
		width: 90px;
		border-radius: 4px !important;
	}

	/deep/.ant-btn-link {
		width: auto;
		padding: 5px;
	}

	/deep/.ant-btn-danger {
		border-radius: 8px !important;
	}
</style>
